<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            float: left;
            width: 96px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-weight: bold;  
            color: rgb(27, 98, 204);
            border-bottom: 1px solid #CCC;
            
        }
        span:hover{
            cursor: pointer;
            color: #fff;
            background-color: rgb(91, 154, 248);
        }
        .navigationBar{
            margin: 5px 0 0 5px;
            width: 302px;
            height: 165px;
            border: 1px solid #CCC;
            border-radius: 5px;
        }
        .tab{
            margin: 5px 0 0 5px;
            width: 100%;
            height: 52px;
        }
        .choose{
            border: 1px solid #CCC;
            border-bottom: 0px;
        }
        ul{
            display: none;
            position: absolute;
            float: left;
            width: 96px;
            height: 100px;
            background-color: rgb(248, 214, 203);
            border: 1px solid #CCC;
            border-top: 0px;
        }
        li{
            width: 96px;
            height: 32px;
            list-style: none;
            text-align: center;
            line-height: 32px;
            border-bottom: 1px solid #CCC;
        }
        li:hover{
            color: white;
            cursor: pointer;
        }
        .last{
            border-bottom: 0;
        }
        .box{
            margin-left: 5px;
            position: relative;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="navigationBar">
        <div class="tab">
            <span>电脑▼</span>
            <span>空调▼</span>
            <span>汽车▼</span>
        </div>
        <div class="box">
            <ul class="computer">
                <li>戴尔</li>
                <li>惠普</li>
                <li class="last">华硕</li>
            </ul>
            <ul class="air_conditioner">
                <li>格力</li>
                <li>海尔</li>
                <li class="last">美的</li>
            </ul>
            <ul class="car">
                <li>宝马</li>
                <li>奥迪</li>
                <li class="last">捷豹</li>
            </ul>
        </div>
    </div>
</body>
<script>
    //获取所有的span标签
    const tab = $('span');
    //获取所有的ul标签
    const box = $('ul');
    //初始化下标
    var index = 0;
    //设置正则表达式，用来改变div里的自定义下拉框的状态
    var reg1 = /▼/g;
    var reg2 = /▲/g;

    /**
     * 该函数用来除去文本中的▼，以达到下拉框被收起的样式
     * 
     * @param element 要除去▼的标签
     */
    removeText = (element,reg,symbol) =>{
        //获得除去▼的字符串，再插入标签中显示
        let str = element.text().replace(reg,symbol);
        element.text(str);

    }

    //对导航栏设置点击监听
    tab.click(function(){

        //判断当前点击的元素是否有类名choose
        if($(this).hasClass('choose')){

            //通过移除类名取消当前元素选中的样式
            $(this).removeClass('choose');
            //设置之前所点击的tab中的文本的自定义下拉框收回样式
            removeText(tab.eq(index),reg2,'▼');
            //获取当前所点击的tab的下标，用来隐藏对应的自定义下拉框
            index = $(this).index();
            box.eq(index).slideUp(500);
            //重置index
            index = 0;

        }else{ 

            //设置之前所点击的tab中的文本的自定义下拉框收回样式
            removeText(tab.eq(index),reg2,'▼');
            //通过移除类名取消之前所点击元素选中的样式
            tab.eq(index).removeClass('choose');
            //设置当前所点击的tab中的文本的自定义下拉框下拉样式
            removeText($(this),reg1,'▲');
            //给当前元素增加选中效果
            $(this).addClass('choose');
            
            //获取当前所点击的tab的下标，用来显示对应的自定义下拉框
            index = $(this).index();
            //设置自定义下拉框的对应位置
            box.eq(index).css('left',96*index);
            //显示对应的自定义下拉框，同时移除其他自定义下拉框
            box.eq(index).slideToggle(500).siblings().slideUp(500);

        }   

    });
    
    
</script>
</html>